/**
 * 学习目标：使用props通信-类组件
 * 步骤：
 * 1. 创建一个类组件
 * 2. 发送数据：在父组件中给子组件设置标签属性
 * 3. 接收数据：在子组件中使用this.props，来接收数据
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 1.创建一个类组件
class Child extends React.Component {
  render() {
    // 注意：使用this.props来获取props对象
    // 推荐，使用解构，避免this.props写太多遍
    const { name, msg } = this.props;

    console.log(name, msg, '打印props下解构的属性');

    return (
      <div>
        <h1>
          我是子组件，我接收到了父组件传来的数据 --- {name} -- {msg}
        </h1>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 2. 在父组件中给子组件设置标签属性 */}
        {/* 注意：React中可以只设置props，不使用。不需要先在子组件定义 */}
        <Child name="张三" msg="狂徒"></Child>
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
